<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">
        <div id="box4">点击我</div>
      </div>
    </div>
  </div>
  <script>
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");
    box1.addEventListener("click", function() {
      console.log("box1")
    });
    box2.addEventListener("click", function() {
      console.log("box2")
    }, true);
    box3.addEventListener("click", function() {
      console.log("box3")
    });
    box4.addEventListener("click", function() {
      console.log("我是box4的输出")
    });
    box4.addEventListener("click", function() {
      console.log("box4")
    }, true);
  </script>
</body>

</html>